import React, { useDeferredValue, useEffect, useState } from "react";


export const SearchList: React.FC = () => {
    const [text, setText] = useState('')
    // deferredText会延迟更新
    const deferredText = useDeferredValue(text)
    const changeText = (e: React.ChangeEvent<HTMLInputElement>) => {
       setText(e.target.value)
    }
    useEffect(()=>{
        // 这里打印，能看出text和deferredText的差异
        console.log(deferredText,"deferredText"),
        console.log(text,'text')
    },[text])
    return (
        <>
            <input type="text" value={text} onChange={(e) => { changeText(e) }} />
            <hr />
            <ShowList text={deferredText}  />
        </>
    )
}

// React.memo缓存，deferredText更新后组件才会重新渲染
const ShowList: React.FC<{text:string}> = React.memo((props) => {
    return Array(10000).fill(props.text).map((item,index)=>{
       return <p key={index}>{item}</p>
    })
}) 